<script setup lang="ts">
import { ref } from 'vue';
import InfiniteLoading from 'v3-infinite-loading'
import { getProductList } from '@/api/product'
// import 'v3-infinite-loading/dist/style.css'
import reviewList from './reviewList.vue';

const current = ref(1)
const pageSize = 10
const list = ref<any[]>([])
const total = ref(0)
const infiniteId = ref(Date.now())
const loadMore = async ($state: any) => {
    const res: any = await getProductList({
        current: current.value,
        pageSize
    })

    if (res.records.length) {
        list.value.push(...res.records)
        total.value = res.total
        current.value += 1
        $state.loaded()
    } else {
        $state.complete()
    }
}
</script>

<template>
    <div class="flex h-full w-full flex-col overflow-auto pb-4">
        <div class="relative mr-4 mb-5 shrink-0 border-b border-[rgba(253,253,253,0.12)]">
            <p
                class="relative inline-block px-1 text-lg leading-9 after:after:absolute after:bottom-0 after:left-0 after:block after:h-0.5 after:rounded-xs after:bg-[#ea3741] after:content-['']">
                評価（{{ total }}）
            </p>
        </div>
        <div class="flex flex-1 flex-col gap-2.5 overflow-y-auto pr-4">
            <template v-for="({ id, name, time, score, price, content }) in list" :key="id">
                <reviewList :name="name" :time="time" :score="score" :price="price" :content="content" />
            </template>
            <infinite-loading class="text-center" @infinite="loadMore" :identifier="infiniteId">
                <template #spinner>
                    <a-spin tip="loading..." />
                </template>
                <template #complete>没有更多了</template>
            </infinite-loading>
        </div>
    </div>
</template>

<style lang="scss" scoped>
:deep(.ant-rate) {


    .ant-rate-star-half {

        .ant-rate-star-first,
        .ant-rate-star-second {
            display: flex;
        }

        .ant-rate-star-second {
            display: flex;

            .anticon {
                color: #fff;
            }
        }
    }

    .ant-rate-star-second {
        display: flex;
    }
}
</style>
